
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>书架</title>
    <link rel="stylesheet" href="css/Dou.css">
    <link rel="stylesheet" href="css/sousuo.css">
    <link rel="stylesheet" href="css/page.css">
    <link rel="stylesheet" href="css/bookShelf.css">
    <script src="js/jquery-3.6.0.js"></script>
    <link rel="shortcut icon" href="https://static.arkread.com/ark/pics/favicon/favicon.ba37640e.ico" type="image/x-icon"/>
    <link rel="mask-icon" href="https://static.arkread.com/ark/pics/favicon/safari-mask-icon.714e3ee0.svg" color="#5795aa"/>
    <style>
        #header-compact-v3 .nav-user{
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 40px;
            height: 50px;
            margin-right: -20px;
        }
        #header-compact-v3 .header-inner a:not([class^=btn]){
            color:#333;
        }
        #header-compact-v3 .nav-user .avatar{
            overflow: hidden;
            width: 30px;
            height: 30px;
            border-radius: 30px;
        }
        .header-inner a{
            cursor: pointer;
        }
        .avatar{
            position: relative;
        }
        a.avatar::after{
            position:absolute;
            top:0;
            right:0;
            bottom: 0;
            left:0;
            border-radius: 100px;
            background: #000;
            content: '';
            opacity: 0;
            transition: opacity .1s ease-in;
        }
        #header-compact-v3 .nav-user .avatar img{
            width: 100%;
            vertical-align: top;
            object-fit: cover;
        }
        .avatar img{
            display: block;
            width: 100%;
            border-radius: 100px;
        }
        img{
            border: none;
            vertical-align: middle;
            -ms-interpolation-mode: bicubic;
        }
        #header-compact-v3 .more-active:hover .drop-down-list{
            display: block;
        }
        #header-compact-v3 .nav-user .drop-down-list{
            top:50px;
        }
        .drop-down-list{
            position:absolute;
            right: 0;
            z-index: 200;
            padding: 10px 0;
            min-width: 120px;
            max-width: 130px;
            background: #fff;
            box-shadow: 0 1px 3px 0 rgba(0,0,0,0.1);
            text-align: left;
            display: none;
        }
        .drop-down-list::before{
            position: absolute;
            margin-top: -22px;
            width: 100%;
            height: 12px;
            content: '';
        }
        #header-compact-v3 .more-active .drop-down-list a{
            color: #333;
        }
        .header-inner{
            cursor: pointer;
        }
        .drop-down-list a{
            position: relative;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 9px;
            white-space: nowrap;
            line-height: 25px;
        }
        .drop-down-list a:hover {
            background-color: #abcdef;
        }
    </style>
</head>
<body>
<%
    String username = (String) request.getSession().getAttribute("username");
%>
%>
<div id="header-container">
    <header id="header-compact-v3" class="pre-rendered-header should-stick">
        <div class="header-inner">
            <a href="#" title="豆瓣阅读" class="site-logo"></a>
            <nav class="func-nav">
                <ul>
                    <li>
                        <button title="分类" class="nav-category fill-current-color">
                            <svg xmlns="http://www.w3.org/2000/svg" width="10" height="7" viewBox="0 0 10 7">
                                <path fill="#a6a6a6"
                                      d="M0 0h10v.7H0zm0 2.1h10v.7H0zm0 2.1h10v.7H0zm0 2.1h10V7H0z"></path>
                            </svg><span class="text" style="font-size: 14px">分类</span>
                        </button>
                    </li>
                    <li>
                        <button id="btn" onclick="toggle()" title="搜索" class="nav-category fill-current-color">
                            <svg xmlns="http://www.w3.org/2000/svg" width="14" viewBox="0 0 14 14">
                                <path fill="#a6a6a6" `
                                      d="M14 12.83l-2.19-2.19a6.61 6.61 0 10-1.17 1.17L12.83 14zM2.5 10.7a5.8 5.8 0 018.2-8.2 5.8 5.8 0 01-8.2 8.2z"></path>
                            </svg><span class="text" style="font-size: 14px">搜索</span>
                        </button>
                    </li>
                </ul>

                <div class="sousuo" id="content" style="display:none;">

                    <form action="#" class="search-form">
                        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18"
                             class="search-icon">
                            <circle cx="8.486" cy="8.486" r="7.736" stroke="#35393C" stroke-width="1.8">

                            </circle>
                            <path fill="#fff" stroke-width="1.2" stroke="#35393C"
                                  d="M4.603 4.603a5.491 5.491 0 000 7.765"></path>
                            <path fill="#A6A6A6" stroke-width="1.2" stroke="#35393C"
                                  d="M13.685 14.39l.705-.705 2.55 2.55a.498.498 0 01-.704.706l-2.55-2.55z"></path>
                        </svg>


                        <input type="text" name="q" maxlength="60" autocomplete="off"
                               placeholder="原创作品 / 同人文 / 电子书 / 作者 / 译者 / 出版社">

                        <button class="btn-search" type="submit">搜索</button>
                    </form>

                    <!-- 热搜 和历史记录 -->

                    <div class="re">
                        <div class="lis">
                            <div>
                                <div>
                                    搜索历史 <span>清除</span>
                                </div>
                                <div style="width: 100%; height: 200px;margin-left: 140px;">
                                    <div class="k strs">
                                        <strong> 吊桥效应</strong>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="lis">
                            <div>
                                <div>
                                    热门搜索
                                </div>
                                <div style="width: 100%; height: 200px;margin-left: 140px;">
                                    <div class="k">
                                        <strong class="iii"> 食得咸鱼低得喝</strong>
                                        <strong class="kkk"> 在傍晚回家</strong>
                                    </div>
                                    <div class="k stt">
                                        <strong class="kk"> 大城小爱</strong>
                                        <strong class="sttt"> 多雨之地</strong>
                                    </div>
                                    <div class="k strs">
                                        <strong> 白日谎言</strong>
                                        <strong> 日偏食</strong>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="lis">
                            <div>
                                <div>
                                    为你推荐
                                </div>
                                <div style="width: 100%; height: 200px;margin-left: 140px;">
                                    <div class="k strs">
                                        <strong> 6部热门原创小说现时半价</strong>
                                    </div>
                                    <div class="k strs">
                                        <strong> 2022 年度榜单</strong>
                                    </div>
                                    <div class="k strs">
                                        <strong> 第五届长篇拉力赛获奖名单公布</strong>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </nav>
            <!-- 头部中间部分 -->
            <div class="site-nav-container">
                <nav class="site-nav site-nav-normal" id="myElement">
                    <ul class="nav-list">
                        <li class="nav-item-original">
                            <a href="#">原创</a>
                        </li>

                        <li class="nav-item-chart">
                            <a href="#">排行</a>
                        </li>

                        <li class="nav-item-ebook">
                            <a href="#">出版</a>
                        </li>

                        <li class="nav-item-ebook">
                            <a href="#">会员</a>
                        </li>

                        <li class="nav-item-ebook">
                            <a href="#">APP</a>
                        </li>
                    </ul>
                </nav>
            </div>

            <div id="nav-submit" class="nav-submit">
                <a href="#" class="lnk-start-publish fill-current-color" style="font-size: 14px">成为作者</a>
            </div>
            <nav class="site-nav-right">
                <ul>
                    <li class="nav-bookshelf">
                        <a href="#" title="书架" aria-label="书架" class="require-login">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" viewBox="0 0 24 24"
                                 class="fill-current-color">
                                <path fill="#a6a6a6"
                                      d="M13.9 5.223l3.14 12.1a.23.23 0 00.284.165l2.332-.645a.233.233 0 00.162-.28l-3.14-12.1a.23.23 0 00-.284-.166l-2.332.645a.233.233 0 00-.162.28zM8.5 5h-3v12h3zm1 12h3V3h-3v14zm4-9.327V14.5h1.77zm0-3.57a1.212 1.212 0 01.293-.125l2.33-.645a1.232 1.232 0 011.516.86v.018l3.136 12.1a1.23 1.23 0 01-.863 1.5l-2.33.647a1.232 1.232 0 01-1.516-.86v-.018l-.537-2.08H13.5V17a1 1 0 01-1 1h-3a1 1 0 01-.5-.134 1 1 0 01-.5.134h-3a1 1 0 01-1-1v-1.5H1.822a.23.23 0 00-.23.227l-.074 5.04a.23.23 0 00.23.233h20.506a.23.23 0 00.228-.234l-.074-5.04a.23.23 0 00-.23-.226h-1.59l-.268-1h1.858a1.23 1.23 0 011.23 1.213l.074 5.038A1.23 1.23 0 0122.27 22H1.75a1.23 1.23 0 01-1.232-1.23v-.02l.074-5.037a1.23 1.23 0 011.23-1.213H4.5V5a1 1 0 011-1h3V3a1 1 0 011-1h3a1 1 0 011 1z"></path>
                            </svg>
                        </a>
                    </li>
                </ul>
            </nav>

            <!-- 第四部分 -->
            <div class="user-info" id="user-info">
                <div class="login-buttons">
                    <a href="#" data-size="sx" class="btn-contained login">
                        <span class="text">登录 / 注册</span>
                    </a>
                </div>
            </div>
        </div>
    </header>
</div>
<div id="main">
    <div id="bookshelf-roor">
        <div data-is-mobile="false">
            <div>
                <div class="sticky-outer-wrapper" style="display: block;">
<%--                    <div class="sticky-inner-wrapper" style="position:relative;z-index:100;transform:translate3d(0px,0px,0px);">--%>
<%--                        <header id="page-header">--%>
<%--                            <h2>--%>
<%--                                <nav class="breadcrumbs--c835K">--%>
<%--                                <span class="breadcrumb--jyru3">--%>
<%--                                    <span>我的书架</span>--%>
<%--                                </span>--%>
<%--                                </nav>--%>
<%--                            </h2>--%>
<%--                        </header>--%>
<%--                    </div>--%>
                </div>
                <div class="section-container" style="margin-top:50px;">
                    <div class="bookFolder--f9Dox">
                        <div class="toolbar--0ac0s">
                            <h2>我的书架<span>&nbsp;&nbsp;</span><span id="num">1</span></h2>
                            <div class="right">
                                <a href="#" class="selector" id="modelList" onclick="exchangeModel(event)">列表模式</a>
                                <a href="#" class="selector co"  id="modelCover" onclick="exchangeModel(event)">封面模式</a>
                            </div>
                        </div>
                        <div style>
                            <ul class="worksList--sYYED" data-layout="cover" id="bookshelf">
                                <li class="worksItemContainer--zExoq">
                                    <a href="#" class="worksItem--zX8vM" data-checked="false" data-managing="false">
                                        <div aria-hidden="false" class="coverContainer--SPE9n">
                                            <div class="cover shadow-cover">
                                                <img src="https://pic.arkread.com/cover/column/f/65085894.1693296661.jpg!cover_default.jpg" alt="" loading="lazy">
                                            </div>
                                        </div>
                                        <div aria-hidden="false" class="info--ZUEJz">
                                            <div class="css-19tt4yh eju3oy61" style="text-align:center;">多雨之地</div>
                                        </div>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="footer">
    <div class="footer-content">
        <div class="footer-item">
            <a href="##">联系我们</a>
        </div>
        <div class="footer-item">
            <a href="##">帮助中心</a>
        </div>
        <div class="footer-item">
            <a href="##">官方微博</a>
        </div>
        <div class="footer-item">
            <a href="##">移动客户端</a>
        </div>
        <div class="footer-item">
            <a href="##">来这里工作</a>
        </div>
    </div>
    <div class="copyright">
        <a href="##"></a>
    </div>
</div>
<script>
    $(document).ready(function (){
        let id=document.getElementById('num');
        let username='<%=username%>';
        $.ajax({
            type:"GET",
            url:"/bookshelf/getMyBook",
            data:{username:username},
            success:function (data){
                id.innerText=data.length;
                $('#bookshelf').empty();
                for(var i=0;i<data.length;i++){
                    $('#bookshelf').append(`<li class="worksItemContainer--zExoq">
                                    <a href="/find/findBookDetail?bookId=`+data[i].bookId+`" class="worksItem--zX8vM" data-checked="false" data-managing="false">
                                        <div aria-hidden="false" class="coverContainer--SPE9n">
                                            <div class="cover shadow-cover">
                                                <img src="`+data[i].bookImage+`" alt="" loading="lazy">
                                            </div>
                                        </div>
                                        <div aria-hidden="false" class="info--ZUEJz">
                                            <div class="css-19tt4yh eju3oy61" style="text-align:center;">`+data[i].bookName+`</div>
                                        </div>
                                    </a>
                             </li>`)
                }
            },
            error:function (error){
                console.log(error);
            }
        })
    })
    function exchangeModel(event){
        let target=event.target;
        let elementUl=document.getElementById('bookshelf');
        let username='<%=username%>';
        const allSelectors = document.querySelectorAll('.selector');//获取所有具有selector的元素
        allSelectors.forEach(selector => {//去除所有元素的co
            selector.classList.remove('co');
        });
        event.target.classList.add('co');//给当前点击的元素加上co样式
        $.ajax({
            type:"GET",
            url:"/bookshelf/getMyBook",
            data:{username:username},
            success:function (data) {
                $('#bookshelf').empty();
                for (var i = 0; i < data.length; i++) {
                    let time=parseInt(data[i].addTime)
                    let timestamp=new Date(time);
                    let year = timestamp.getFullYear();
                    let month = timestamp.getMonth() + 1;
                    let day = timestamp.getDate();
                    if (target.id === 'modelList') {
                        elementUl.setAttribute('data-layout','list');
                        $('#bookshelf').append(`<li class="worksItemContainer--zExoq">
                                    <a href="/find/findBookDetail?bookId=`+data[i].bookId+`" class="worksItem--zX8vM" data-checked="false" data-managing="false">
                                        <div aria-hidden="false" class="coverContainer--SPE9n">
                                            <div class="cover shadow-cover">
                                               <img src="`+ data[i].bookImage+`" alt="" loading="lazy">
                                            </div>
                                        </div>
                                        <div aria-hidden="false" class="info--ZUEJz">
                                            <div class="css-1dqp0uu eju3oy61">`+data[i].bookName+`</div>
                                            <div class="extraInfo--tXqph">
                                                <div class="author">
                                                    <span class="author-link">
                                                        <span>`+data[i].bookAuthor+`</span>
                                                    </span>
                                                </div>
                                                <span>连载中</span>
                                                <span>
                                                    <div class="progress">`+year+'-'+month+'-'+day+`<span id="text">加入书架</span></div>
                                                </span>
                                            </div>
                                        </div>
                                    </a>
                               </li>`)
                    }else{
                        elementUl.setAttribute('data-layout','cover');
                        $('#bookshelf').append(`<li class="worksItemContainer--zExoq">
                                    <a href="/find/findBookDetail?bookId=`+data[i].bookId+`" class="worksItem--zX8vM" data-checked="false" data-managing="false">
                                        <div aria-hidden="false" class="coverContainer--SPE9n">
                                            <div class="cover shadow-cover">
                                                <img src="`+data[i].bookImage+`" alt="" loading="lazy">
                                            </div>
                                        </div>
                                        <div aria-hidden="false" class="info--ZUEJz">
                                            <div class="css-19tt4yh eju3oy61" style="text-align:center;">`+data[i].bookName+`</div>
                                        </div>
                                    </a>
                             </li>`)
                    }
                }
            }
        })
    }
    $(document).ready(function (){
        let username='<%=username%>';
        console.log(username);
        if (username==='null') {//当前尚未登录
            console.log('success2');
            $('#user-info').empty();
            $('#user-info').append('<div class="login-buttons">'+'<a href="userLogin.jsp" data-size="sx" class="btn-contained login">'+
                '<span class="text">登录 / 注册</span></a> </div>')
        }else{//已经登陆.带着登陆信息到后端加载用户头像
            console.log('success1');
            $.ajax({
                type:"GET",
                url:"/load/Image",
                data:{username:username},
                success:function (data) {
                    $('#user-info').empty();
                    for(var i=0;i<data.length;i++) {
                        $('#user-info').append('<div class="nav-user more-active">' +
                            '<a href="#" class="avatar">' +
                            '<img src="'+data[i].userAvatar+'" alt="">'+
                            '</a>' +
                            '<div class="drop-down-list">' +
                            '<a href="/myIndex/message?username='+username+'">' +
                            '<span class="text">个人主页</span>' +
                            '</a>' +
                            '<a href="#">' +
                            '<span class="text">退出登陆</span>' +
                            '</a>' +
                            '</div>' +
                            '</div>')
                    }
                },
                error:function (error){
                    console.log(error);
                }
            })
        }
    })
</script>
</body>
</html>
